<template>
  <div class="chart-container">
    <div class="trafficChart">
    <div class="timeBox">
      <el-date-picker
      v-model="dateList"
      type="datetimerange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
    </el-date-picker>
    </div>
     
      <trafficCharts :xData="xData" :seriesData="seriesData"></trafficCharts>
    </div>
    <div class="connect">
      <el-form :model="deviceInfoForm" ref="deviceInfoForm" label-width="100px" class="demo-ruleForm"
        label-position="top">
        <el-form-item label="设备类型" prop="type">
          <el-select v-model="deviceInfoForm.type" style="width: 100%;" placeholder="请选择设备类型">
            <el-option label="集成处理器" value="shanghai"></el-option>
            <el-option label="单机处理器" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否DHCP" prop="isDHPC">
          <el-select v-model="deviceInfoForm.isDHPC" style="width: 100%;" placeholder="请选择是否DHCP">
            <el-option label="是" value="shanghai"></el-option>
            <el-option label="否" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="网络地址" prop="ip">
          <el-input v-model.number="deviceInfoForm.ip" autocomplete="off" placeholder="例如: 192.168.1.1"></el-input>
        </el-form-item>
        <el-form-item label="子网掩码(mask)" prop="mask">
          <el-input v-model.number="deviceInfoForm.mask" autocomplete="off" placeholder="例如: 255.255.255.0"></el-input>
        </el-form-item>
        <el-form-item label="默认网关" prop="gateway">
          <el-input v-model.number="deviceInfoForm.gateway" autocomplete="off" placeholder="例如: 192.168.1.1"></el-input>
        </el-form-item>
        <div class="flexCenter" >
          <el-form-item label="DNS1" prop="dns1" style="flex: 1">
          <el-input v-model.number="deviceInfoForm.dns1" autocomplete="off" placeholder="例如: 8.8.8.8"></el-input>
        </el-form-item >
        <div style="width: 10px;">
          
        </div>
        <el-form-item label="DNS2" prop="dns2" style="flex: 1">
          <el-input v-model.number="deviceInfoForm.dns2" autocomplete="off" placeholder="例如: 8.8.8.4"></el-input>
        </el-form-item>
        </div>
     
        <div class="flexCenter">
          <el-form-item>
            <el-button type="primary" @click="onExtract('deviceInfoForm')">提取配置</el-button>
            <el-button type="success" @click="onSave('deviceInfoForm')">保存配置</el-button>
            <el-button type="warning" @click="onRefresh('deviceInfoForm')">自组网刷新</el-button>
          </el-form-item>
        </div>

      </el-form>
    </div>
  </div>
</template>

<script>
import trafficCharts from "./components/trafficCharts.vue";

export default {
  name: 'LineChart',
  components: {
    trafficCharts
  },
  data() {
    return {
      deviceInfoForm: {
        type: '集成处理器',
        isDHPC: '否',
        ip: '',
        mask: '',
        gateway: '',
        dns1: '',
        dns2: ''
      },
      xData: ['10:00', '10.02', '10.03', '10.04', '10.05', '10.06', '10.07', '10.08', '10.09', '10.10', '10.11', '10.12', '10.13', '10.14', '10.15', '10.16', '10.17', '10.18', '10.19', '10.20', '10.21', '10.22'],
      seriesData: [100, 130, 240, 100, 120, 130, 135, 160, 130, 170, 233, 123, 255, 234, 130, 234, 123, 123, 345, 342, 123, 205],
      // 时间
      dateList: ['','']
    };
  },
  methods: {
    // 提取
    onExtract() {
           alert('提取配置')
    },
  // 保存
    onSave() {
      alert('保存配置')
    },
    // 刷新
    onRefresh() {
      alert('自组网刷新')
    }
  }
}
</script>

<style scoped>
.chart-container {
  position: relative;
  width: 100%;
  height: calc(100vh - 152px);
  padding: 20px;
  background-color: #ffffff;
  font-family: SourceHanSansSC-regular;
  font-size: 16px;
}

.trafficChart {
  position: relative;
  width: 100%;
  height: 288px;
  /* background-color: #cccccc; */
}
.timeBox {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
}
.connect {
  height: calc(100% - 300px);
  border-top: 1px solid #bfc3cb;
  /* overflow: auto; */
}

::v-deep .el-form-item--small.el-form-item {
  margin-bottom: 12px;
}

::v-deep .el-form-item--small .el-form-item__label {
  line-height: 20px;
}


</style>
